import React, { Component } from 'react'

import action from '../../store/action'
import { connect } from "react-redux"
import { withRouter } from "react-router-dom"

import "./inclusive.less"

class Disperse extends Component {
    state = {
        val: ""
    }
    render() {
        let { icon1, icon2, value, btn, clearArr } = this.props
        // console.log(this.props);
        return (
            <div>
                <div className="headDisperse_top">
                    <div className="icon1" onClick={() => {
                        sessionStorage.setItem("flag", JSON.stringify(true))
                        this.props.history.push('/list')
                        clearArr()
                    }} ><i className={icon1}></i></div>
                    <div className="headDisperse_top_div">搜索</div>
                </div>
                <div id="headDisperse">

                    <div className="input">
                        {
                            btn !== "搜索" ? <input type="text" placeholder={value} onClick={() => {

                            }} /> :
                                <input ref="input" type="text" placeholder={value} onChange={(e) => {
                                    this.setState({ val: e.target.value })
                                }} />
                        }

                        <i className={icon2}></i>
                    </div>
                </div>
            </div>
        )
    }

    ceshi = () => {
        // 在这里发送请求
        // console.log(this.state.val);
        let { val } = this.state
        // 请求接口获取后台数据
        this.props.getReturnData({
            val: val
        })
        // 搜索历史
        this.props.getInputAchieve(val)
    }

    debounce = (func, wait) => {
        let time = wait || 200
        let timer;
        return function () {
            clearTimeout(timer);
            timer = setTimeout(() => {
                func()
            }, time)
        }
    }
    componentDidMount() {
        this.refs['input'].addEventListener('input', this.debounce(this.ceshi, 1000))
    }
}

// 表头默认值
Disperse.defaultProps = {
    icon1: "iconfont icon-fanhui2", //第一个图标
    icon2: "iconfont icon-xiangji",//第二个图标
    value: "蛋糕",//input框内容
    btn: "搜索",//btn按钮内容
}

export default connect(state => state.foodf, action.foodf)(withRouter(Disperse))